<template>
  <div class="smart-reply-setting">
    <el-form :model="aiSetting" ref="smartReplyForm" label-width="120px" :rules="rules">
      <el-form-item label="模型类型:" prop="modelId">
        <el-select filterable placeholder="模型类型" v-model="aiSetting.modelId">
          <el-option :key="'smartReplySetting_modelId_' + index" v-for="(item, index) in aiModelList"
            :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="API Key:" prop="token">
        <div class="win-flex-row">
          <el-input v-model="aiSetting.token" placeholder="请输入TOKEN">
          </el-input>
          <el-button type="primary" @click="openUrl">申请KEY</el-button>
        </div>
      </el-form-item>
      <el-form-item label="屏蔽词:" prop="blockWords">
        <el-input type="textarea" v-model="aiSetting.blockWords" :autosize="{ minRows: 5, maxRows: 10 }"
          placeholder="请输入屏蔽词">
        </el-input>
      </el-form-item>
      <el-form-item label="智能体提示词:" prop="liveRoomDesc">
        <el-input type="textarea" v-model="aiSetting.liveRoomDesc" :autosize="{ minRows: 5, maxRows: 10 }"
          placeholder="请输入智能体提示词">
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="testModel">测试</el-button>
      </el-form-item>
    </el-form>
    <TestModelDialog ref="testModelRef" />
  </div>
</template>

<script>
import { listAiModel, testModel } from '@/api/biaimodel/biaimodel';
export default {
  name: 'aiSetting',
  components: {
    TestModelDialog: resolve => require(['./components/TestModelDialog'], resolve),
  },
  data() {
    return {
      rules: {
        modelId: [{ required: true, message: '模型类型不能为空', trigger: 'blur' }],
        token: [{ required: true, message: 'token不能为空', trigger: 'blur' }],
      },
      aiModelList: [],
    };
  },
  created() {
    this.getAiMoodelList();
  },
  computed: {
    aiSetting() {
      return this.pageConfig.aiSetting;
    },
    pageConfig() {
      return this.$store.state.page.config;
    }
  },
  methods: {
    openUrl() {
      let findItem = this.aiModelList.find(item => item.value == this.aiSetting.modelId);
      if (findItem) {
        if (!findItem.officialWebsiteUrl) {
          this.$modal.msgError('没有维护申请KEY链接地址');
          return;
        }
        window.open(findItem.officialWebsiteUrl);
      }
    },
    getAiMoodelList() {
      listAiModel({
        pageSize: 100,
        pageNo: 1,
        queryParams: {}
      }).then((res) => {
        if (res.result.items) {
          this.aiModelList = res.result.items.map(item => {
            return {
              label: item.modelName,
              value: item.id,
              officialWebsiteUrl: item.officialWebsiteUrl
            }
          });
        }
      });
    },
    testModel: _.debounce(function () {
      this.$refs['smartReplyForm'].validate(valid => {
        if (valid) {
          //这个地方弹框填写分组名称
          this.$prompt('请填写提问的问题', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消'
          }).then(({ value }) => {
            try {
              this.$modal.loading('测试中');
              testModel({
                ...this.aiSetting,
                message: value
              }).then(res => {
                this.$modal.closeLoading();
                if (res.code == 200) {
                  this.$modal.msgSuccess('测试成功');
                  this.$refs['testModelRef'].open(res.msg);
                } else {
                  this.$modal.msgError(res.msg);
                }
              });
            } catch (error) {
              console.error(error);
              this.$modal.closeLoading();
              this.$modal.msgSuccess('测试失败');
            }
          }).catch(() => {

          });
        }
      });
    }, 80),
  }
};
</script>

<style lang="scss" scoped>
.smart-reply-setting {
  ::v-deep .el-form-item {
    margin-bottom: 20px;
  }
}
</style>
